<template>
  <div>
    <n-breadcrumb>
      <n-breadcrumb-item>
        <NuxtLink to="/">首页</NuxtLink>
      </n-breadcrumb-item>
      <n-breadcrumb-item>
        <NuxtLink to="/bbs/0/1">社区列表</NuxtLink>
      </n-breadcrumb-item>
      <n-breadcrumb-item>
        {{ title }}
      </n-breadcrumb-item>
    </n-breadcrumb>

    <n-grid :x-gap="20">
      <n-grid-item class="wrap" :span="18">
        <LoadingGroup :pending="pending" :error="error">
          <section class="info">
            <div>
              <n-image
                width="100"
                :src="data?.user?.avatar"
                fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
              />
              <div>{{ data?.user?.name }}</div>
              <div>{{ data?.created_time }}</div>
            </div>
            <div v-if="data?.is_top">置顶</div>
          </section>
          <n-divider />

          <section class="content">
            <div v-for="v in data?.content">
              <div v-html="v.text"></div>
              <n-image
                v-for="v1 in v.images"
                :key="v1"
                width="50"
                object-fit="cover"
                :src="v1"
                fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
              />
            </div>
            <div class="like">
              <n-button
                secondary
                strong
                size="tiny"
                class="mr-3"
                :type="data?.issupport ? 'primary' : 'tertiary'"
                @click.stop="handleSupport(data)"
                :loading="supportLoading"
              >
                <template #icon>
                  <n-icon>
                    <ThumbsUpSharp />
                  </n-icon>
                </template>
                点赞 {{ data?.support_count || 0 }}
              </n-button>
            </div>
          </section>
          <n-divider />

          <section>
            <CommentInput :post_id="id" @success="handleCommentSuccess" />
            <Comment :post_id="id" ref="CommentRef" />
          </section>
        </LoadingGroup>
      </n-grid-item>

      <n-grid-item :span="6">
        <NuxtLink to="/post/add">
          <n-button type="primary" class="mb-5 w-full">发布帖子</n-button>
        </NuxtLink>
        <HotCourseList />
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script setup>
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NGrid,
  NGridItem,
  NDivider,
  NButton,
  NAvatar,
  NTag,
  NInput,
  NImage,
  NImageGroup,
  NIcon,
  createDiscreteApi,
} from "naive-ui";
import { ThumbsUpSharp } from "@vicons/ionicons5";

const route = useRoute();
const id = route?.params?.id;

const { data, error, pending } = await useReadPostApi(id);
console.log(data.value, "--data-");

const title = computed(() => {
  if (pending.value) {
    return "帖子详情";
  }
  let t = data.value?.desc?.text;
  if (t && t.length >= 10) {
    t = t.slice(0, 10) + "...";
  }
  return t;
});
useHead({ title });

const { supportLoading, handleSupport } = useHandleSupportPost(); // 点赞

// 评论成功
const CommentRef = ref(null);
function handleCommentSuccess() {
  CommentRef.value.handlePageChange(1);
}
</script>

<style lang="scss" scoped>
.post-btn {
  margin-bottom: 20px;
}
.wrap {
  background-color: #fff;
  .info {
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
  }
  .content {
    padding: 0 40px;
    .like {
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>
